<template>
  <div>
    <h1>生命周期测试</h1>
    <p ref="myp">{{ num }} {{ com1 }}</p>
  </div>
</template>

<script>
export default {
  name: "LifeTest",
  data() {
    return {
      num: 100,
      message: "HydraKyouFeng",
    };
  },
  computed: {
    com1: function () {
      return "com1";
    },
  },
  beforeCreate: function () {
    console.log("beforeCreate vue对象创建前===============》");
    console.log("%c%s", "color:red", "myp:", this.$refs.myp);  
  },
  created: function () {
    console.log("created vue对象创建完毕状态===============》");
    console.log("%c%s", "color:red", "myp:", this.$refs.myp);
    this.$nextTick(() => {
        console.log("nextTick = ",this.$refs.myp.innerText)
    })
  },
  beforeMount: function () {
    console.log(
      "beforeMount 挂载前（vue属性被挂载到节点上）状态===============》"
    );
    console.log("%c%s", "color:red", "myp:", this.$refs.myp);
  },
  mounted: function () {
    console.log("mounted 挂载结束状态===============》");
    console.log("%c%s", "color:red", "myp:", this.$refs.myp.innerText);
  },
  beforeUpdate: function () {
    console.log("beforeUpdate DOM节点更新前状态===============》");
    console.log("%c%s", "color:red", "myp:", this.$refs.myp);
  },
  updated: function () {
    console.log("updated DOM节点更新完成状态===============》");
    console.log("%c%s", "color:red", "myp:", this.$refs.myp);
  },
  beforeUnmount: function () {
    console.log("beforeDestroy 销毁前状态===============》");
    console.log("%c%s", "color:red", "myp:", this.$refs.myp);
  },
  unmounted: function () {
    console.log("destroyed 销毁完成状态===============》");
    console.log("%c%s", "color:red", "myp:", this.$refs.myp);
  },
};
</script>

<style>
</style>